<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="test"></div>

        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
		<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
		<!-- 生产环境中不建议使用 -->
		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

        <script type="text/babel">
            /* 
                如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。
            */
            class Demo extends React.Component{
                state = {isHot:false};
                changWeather = ()=>{
                    // console.log(this);
                    const {isHot} = this.state
                    this.setState({isHot : !isHot})
                }
                showInfo = ()=>{
                    // console.log(this);
                    const {input1} = this;
                    alert(input1.value)
                }
                saveInput = (c)=>{
                    this.input1 = c;
                    console.log(this.input1);
                    console.log("input1",c)
                }
                render(){
                    console.log(this);
                    const {isHot} = this.state;
                    return(
                        <div>
                            <h1>今天天气{isHot ? '晴朗' :'大风'}</h1>
                            <button onClick={this.changWeather}>点我改变天气</button>
                            {/*直接写内联的回调 没有影响*/}
                            {/*<input ref={(c)=>{this.input1 = c,console.log("input1",c)}} type="text"/>*/}

                            {/*类绑定的形式*/}
                            <input ref={this.saveInput} type="text"/>
                            <button onClick={this.showInfo}>点击提示输入的数据</button>    
                        </div>
                    )
                }
            }
            ReactDOM.render(<Demo/>,document.getElementById("test"));
        </script>
    </body>
</html>